<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Authing Hello World</title>
    <style>
        .btn {
            background-color: #45bbee;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            color: #fff;
        }
        .btn:hover {
            background-color: #45aaff;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="logout" style="display: none">
    你已登录，用户名为：<span id="user"></span>。
    <div>
        完整用户信息：
        <code id="userInfo"></code>
    </div>
    <button class="btn" id="logout-btn" style="margin-top:11px">退出</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/@authing/guard@1.9.10/dist/Guard.umd.min.js"></script>

<script>

    const form = new Guard('5f8d2827feaa6e31598fda94', {
        // 时间戳，不填则默认生成当前时间戳
        timestamp: Math.round(new Date() / 1000),
        // 随机数，不填则默认生成随机数
        nonce: Math.ceil(Math.random() * Math.pow(10, 6)),

        qrcodeScanning: {
            redirect: false,
        }
    });

    function saveUserInfo(user){
        localStorage.setItem('userInfo', JSON.stringify(user));
        localStorage.setItem('userId', user._id); // 存储用户 id 到 localStorage 中
        localStorage.setItem('username', user.username); // 存储用户 username 到 localStorage 中
        localStorage.setItem('token', user.token) // 存储用户 token 到 localStorage 中
    }

    form.on('scanned-success', async function(user) {
        saveUserInfo(user)

        form.hide(); // 为了简单起见，这里在登录成功后直接隐藏表单，在 React 或 Vue 应用中，你可以执行路由跳转或其他业务
        showLoginStatus();
    });

    form.on('authing-load', async function(authing) {
        console.log(authing)
        // Authing 实例加载成功后的回调函数，参数 authing 为 authing 对象

        // 使用 checkLoginStatus 方法判断当前的登录状态，需要使用 await
        // 如已经登录则隐藏登录框并显示当前的用户信息
        // 这段代码的作用是用户如果已经登录，那么刷新后还可以看到自己的用户信息
        const token = localStorage.getItem('token')
        const result = await authing.checkLoginStatus(token);
        if (result.status) {
            // 隐藏登录框
            form.hide();
            // 显示用户基础信息
            showLoginStatus();
        }

        // 使用 jQuery 监听退出按钮的点击事件
        $('#logout-btn').click(async function() {
            // 使用 logout 方法，并传入用户的 userId 进行退出
            await authing.logout(localStorage.getItem('userId'));
            alert('退出成功');
            // 刷新页面
            location.reload();
        });
    })

    form.on('authenticated', function(user) {
        // 成功登录后的回调事件，参数 user 为用户数据

        saveUserInfo(user)

        form.hide(); // 为了简单起见，这里在登录成功后直接隐藏表单，在 React 或 Vue 应用中，你可以执行路由跳转或其他业务
        showLoginStatus();
    });

    const showLoginStatus = () => {
        $('#logout').show();
        $('#user').html(localStorage.getItem('username'));
        $('#userInfo').html(localStorage.getItem('userInfo'));
    }
</script>
</body>
</html>